<template>
  <div class="chart-container">
    <a-tree
      v-model="checkedKeys"
      checkable
      :expanded-keys="expandedKeys"
      :auto-expand-parent="autoExpandParent"
      :selected-keys="selectedKeys"
      :tree-data="treeData"
      :load-data="onLoadData"
      @expand="onExpand"
      @select="onSelect"
      :replaceFields="replaceFields"
    />
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div>
            <!-- <a-cascader
                :options="options"
                :default-value="['zhejiang', 'hangzhou', 'xihu']"
                style="width: 100%"
              >
                <template slot="displayRender" slot-scope="{ labels, selectedOptions }">
                  <span v-for="(label, index) in labels" :key="selectedOptions[index].value">
                    <span v-if="index === labels.length - 1">
                      {{ label }} (<a @click="e => handleAreaClick(e, label, selectedOptions[index])">{{
                        selectedOptions[index].code
                      }}</a
                      >)
                    </span>
                    <span v-else @click="onChange"> {{ label }} / </span>
                  </span>
                </template>
              </a-cascader> -->

    </div>

  </div>
</template>

<script>

export default {
  name: "demoTwenty15",
  filters: {},
  data() {
    return {
      quanxianData:[],
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      replaceFields: {
        children: "personTreeList",
        title: "organizationName",
        key: "organizationId"
      }
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck aaaaaaa", val);
    }
  },
  components: {},
  created() {
    let dataData = {
      code: 200,
      msg: "处理成功",
      time: 1638934287103,
      success: true,
      data: [
        {
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          current: null,
          size: null,
          keyword: null,
          organizationId: "1449934175342755842",
          organizationName: "研发部门-A",
          parentOrganizationId: "1449933525389213697",
          allId: "1449933525389213697,1449934175342755842",
          mainDataId: "10002",
          officeAreaId: "1443123133698580481",
          deleted: null,
          remark: null,

          // personTreeList: [
          //   {
          //     createBy: null,
          //     createTime: null,
          //     updateBy: null,
          //     updateTime: null,
          //     current: null,
          //     size: null,
          //     keyword: null,
          //     personId: "1446295763134050306",
          //     personName: "刘成",
          //     sex: "1",
          //     orgnizationId: null,
          //     areaId: null,
          //     officeName: "邮电大厦",
          //     personCatId: "1",
          //     staffCode: "A1001",
          //     managerId: "MP004",
          //     mobileNo: "18856889966",
          //     hasFace: null
          //   },
          //   {
          //     createBy: null,
          //     createTime: null,
          //     updateBy: null,
          //     updateTime: null,
          //     current: null,
          //     size: null,
          //     keyword: null,
          //     personId: "1446295886547251201",
          //     personName: "王晨",
          //     sex: "1",
          //     orgnizationId: null,
          //     areaId: null,
          //     officeName: "邮电大厦",
          //     personCatId: "1",
          //     staffCode: "A1002",
          //     managerId: "MP004",
          //     mobileNo: "18888889999",
          //     hasFace: null
          //   },
          //   {
          //     createBy: null,
          //     createTime: null,
          //     updateBy: null,
          //     updateTime: null,
          //     current: null,
          //     size: null,
          //     keyword: null,
          //     personId: "1451363428911316993",
          //     personName: "李四",
          //     sex: "1",
          //     orgnizationId: null,
          //     areaId: null,
          //     officeName: "邮电大厦",
          //     personCatId: "2",
          //     staffCode: "14612233356",
          //     managerId: "MP004",
          //     mobileNo: "13955842145",
          //     hasFace: null
          //   }
          // ]

        },
        {
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          current: null,
          size: null,
          keyword: null,
          organizationId: "1449934343140081665",
          organizationName: "研发部门-B",
          parentOrganizationId: "1449933941678080001",
          allId: "1449933525389213697,1449933941678080001,1449934343140081665",
          mainDataId: "10003",
          officeAreaId: "1443123133698580481",
          deleted: null,
          remark: null,

          // personTreeList: [
          //   {
          //     createBy: null,
          //     createTime: null,
          //     updateBy: null,
          //     updateTime: null,
          //     current: null,
          //     size: null,
          //     keyword: null,
          //     personId: "1446313228400328705",
          //     personName: "刘命",
          //     sex: "1",
          //     orgnizationId: null,
          //     areaId: null,
          //     officeName: "邮电大厦",
          //     personCatId: "2",
          //     staffCode: "A1003",
          //     managerId: "MP004",
          //     mobileNo: "18856889968",
          //     hasFace: null
          //   }
          // ]

        },
       
     

      ]
    };
 
    this.treeData = JSON.parse(JSON.stringify(this.formatData(dataData.data))) || [];
     
 
  },
  mounted() {},
  methods: {


      onLoadData(treeNode) {
          console.log('/////');
          console.log(treeNode);
          console.log(treeNode.dataRef);
          console.log('/////');

        return new Promise(resolve => {
              if (treeNode.dataRef.personTreeList) {
                resolve();
                return;
              }

              setTimeout(() => {
                treeNode.dataRef.personTreeList = [
                             {
                              createBy: null,
                              createTime: null,
                              updateBy: null,
                              updateTime: null,
                              current: null,
                              size: null,
                              keyword: null,
                              organizationId: "1446295763134050306",
                              organizationName: "刘成",
                              sex: "1",
                              orgnizationId: null,
                              areaId: null,
                              officeName: "邮电大厦",
                              personCatId: "1",
                              staffCode: "A1001",
                              managerId: "MP004",
                              mobileNo: "18856889966",
                              hasFace: null
                            },
                            {
                              createBy: null,
                              createTime: null,
                              updateBy: null,
                              updateTime: null,
                              current: null,
                              size: null,
                              keyword: null,
                              organizationId: "1446295886547251201",
                              organizationName: "王晨",
                              sex: "1",
                              orgnizationId: null,
                              areaId: null,
                              officeName: "邮电大厦",
                              personCatId: "1",
                              staffCode: "A1002",
                              managerId: "MP004",
                              mobileNo: "18888889999",
                              hasFace: null
                            },
                            {
                              createBy: null,
                              createTime: null,
                              updateBy: null,
                              updateTime: null,
                              current: null,
                              size: null,
                              keyword: null,
                              organizationId: "1451363428911316993",
                              organizationName: "李四",
                              sex: "1",
                              orgnizationId: null,
                              areaId: null,
                              officeName: "邮电大厦",
                              personCatId: "2",
                              staffCode: "14612233356",
                              managerId: "MP004",
                              mobileNo: "13955842145",
                              hasFace: null
                            }
                ];
                this.treeData = [...this.treeData];

                 console.log('aaaa');
                 console.log(this.treeData);
                 console.log('aaaa');

                resolve();
              }, 1000);


        });
    },
  
    formatData(data) {
      const that = this;
      data.forEach(element => {
        if (!element.organizationId) {
          element.organizationId = element.personId;
          element.organizationName = element.personName;
        }
        if (element.personTreeList && element.personTreeList.length > 0) {
          that.formatData(element.personTreeList);
        } else {
          element.personTreeList = undefined;
        }
      });
      return data;
    },
    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
   
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;

    },
    onCheck(checkedKeys) {
      console.log("onCheck  zzzzz", checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log("onSelect", info);

      this.selectedKeys = selectedKeys;
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
